<template>
  <div class="avatar-container">
    <div class="avatar-wrapper">
      <img 
        v-if="src" 
        :src="src" 
        :alt="alt" 
        class="avatar-image" 
        :width="imageWidth+'px'"
        :height="imageHeight+'px'"
      />
      <!-- 若没有图片资源，可展示默认内容，比如文字或默认图标 -->
      <div v-else class="default-avatar" :style="{width: imageWidth+'px', height: imageHeight+'px'}">
        {{ defaultText }}
      </div>
    </div>
    <!-- 悬停时显示的用户信息卡片 -->
  </div>
</template>

<script>
export default {
  name: "CustomFloatAvatar",
  props: {
    src: {
      type: String,
      default: "",
    },
    alt: {
      type: String,
      default: "avatar",
    },
    defaultText: {
      type: String,
      default: "A",
    },
     // 添加图片宽高props，支持动态传入
     imageWidth: {
      type: [Number, String],
      default: 32
    },
    imageHeight: {
      type: [Number, String],
      default: 32
    }
  },
};
</script>

<style scoped>
/* 容器样式 */
.avatar-container {
  position: relative;
}

/* 头像包装器样式 */
.avatar-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 20px 20px 20px 0;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
    justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  padding: 2px;
  background-color: #348cf8;
 
}

/* 头像包装器悬停效果 - 变成长方形 */
.avatar-wrapper:hover {
  /* border: 2px solid blue; */
  width: 401px;
  height: 100px;
  /* position: absolute; */
  /* top: -75px;
  left: 5px; */
  /* 
  border-radius: 4px; */
  /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); */
}

/* 头像图片样式 */
.avatar-image {
  border-radius: 50%;
  /* width: 100%;
  height: 100%;
  object-fit: cover; */
  transition: all 0.3s ease;
}

/* 默认头像样式 */
.default-avatar {
  width: 100%;
  height: 100%;
  background-color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: #4b5563;
  transition: all 0.3s ease;
}
</style>
